<template>
  <div class="wrapInput">
    <el-select
      v-model="value"
      clearable
      :placeholder="titlename"
      style="height:0.8vw;padding: 0.38vw 0 0 0;"
      :style="{width:styleInputs}"
      @clear="inputClear"
      @change="idValue"
    >
      <el-option
        v-for="item in option"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "pubInput",
  props: {
    option: {
      type: Array,
      defatult: function () { 
        return [];
      },
    },
    styleInput: {
      type: String,
      // default:'30%'
      },
      titleName:String,
      valueInputname:{
        type:String,
        defatult:''
      },
      valueInput:{
        type:Number,
        defatult:''
      },
  
  },
  methods: {
    idValue(){
          this.$emit("changeId",this.value)
        },
        inputClear(){
        this.value=this.inputValue;
        this.idValue()
      }
  },
  computed: {
    styleInputs() {
     
        return this.styleInput;
      },
      titlename(){
        return this.titleName
      },
      valueInputnames(){
        return this.valueInputname
      },
      inputValue(){
        return this.valueInput
      },
      
  },
  data() {
    return {
      value: "",
    };
  },
  mounted() {
    this.value=this.valueInputnames
  },
};
</script>
<style lang="less" scoped="scoped">
　　/deep/.el-input--suffix .el-input__inner {
  height: 0.8vw;
  line-height: 0.8vw;
  background: #0d345b;
  color: #fff;
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
　　/deep/.el-select .el-input .el-select__caret {
  line-height: 24px;
  color: #fff;
}
　/deep/ .el-input__inner {
  border-color: #2f7abe;
}
</style>
